<template>
  <view class="uni-wrap">
    <uni-section title="销售管理" type="line" padding>
      <uni-grid :column="3" :highlight="true">
        <uni-grid-item v-for="(item, index) in saleMenuList" :index="index" :key="index">
          <view class="grid-item-box" @click="goTo(item.page)">
            <div class="icon-wrap">
              <uni-icons :type="item.icon" :size="22" color="#fff" />
            </div>
            <text class="text">{{ item.text }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
    <uni-section title="采购管理" type="line" padding>
      <uni-grid :column="3" :highlight="true">
        <uni-grid-item v-for="(item, index) in purchaseMenuList" :index="index" :key="index">
          <view class="grid-item-box" @click="goTo(item.page)">
            <div class="icon-wrap">
              <uni-icons :type="item.icon" :size="22" color="#fff" />
            </div>
            <text class="text">{{ item.text }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabbarValue: "",
      saleMenuList: [
        {
          icon: "compose",
          text: "销售订单",
          page: "/pages/saleManage/saleOrder/list"
        },
        {
          icon: "compose",
          text: "销售出库",
          page: "/pages/saleManage/saleOut/list"
        }
      ],
      purchaseMenuList: [
        {
          icon: "compose",
          text: "采购入库",
          page: "/pages/purchasingManage/putIn/list"
        }
      ],
      userRoleName: ""
    };
  },
  onLoad() {},
  onShow() {
    this.getUserRouters();
    this.userRoleName =
      uni.getStorageSync("userInfo") &&
      uni.getStorageSync("userInfo").roles[0].roleName;
  },
  methods: {
    goTo(pageUrl) {
      uni.navigateTo({
        url: pageUrl,
        // animationType: "pop-in"
      });
    },

    getUserRouters() {
      this.$get(`/getRouters`, {}).then(res => {});
    }
  }
};
</script>

<style lang="scss">
.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 15px 0;
  background-color: #fff;
  .icon-wrap {
    padding: 10px;
    background-color: #1677ff;
    border-radius: 8px;
  }

  .text {
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>
